<template>
    <Layout title='设置'>
        <div ref="node">
            <!-- <img src="../../images/nuolai-icon-s.png" alt="" srcset=""> -->
            <!-- 如果要绑定值，需要先把图片引入进来 -->
            <img @click="changePhoto"
                :src="userInfo.photo ? 'http://localhost:14600' + userInfo.photo : photo" alt="" srcset="">

            <button @click="getPhones">获取电话簿</button>
        </div>
    </Layout>
</template>

<script>
    import { base64UploadApi, fileUploadApi, userUpdateApi } from '@/apis/homeApi'
    import photo from '../../images/nuolai-icon-s.png'

    export default {
        data() {
            return {
                userPhoto: '',
                photo
            }
        },

        computed: {
            userInfo() {
                return this.$store.getters['common/userInfo']
            }
        },

        methods: {
            getPhones() {
                window.plus.contacts.getAddressBook(window.plus.contacts.ADDRESSBOOK_PHONE, function (addressbook) {
                        addressbook.find(["displayName","phoneNumbers"],function(contacts){
                            console.log(contacts)
                        }, function () {
                            console.log("error")
                        },{multiple:true})
                    },function(e){
                        console.log("Get address book failed: " + e.message)
                    });
            },
            changePhoto() {
                let input = document.createElement('input')
                input.setAttribute('type', 'file')
                input.setAttribute('accept', 'image/*')
                input.onchange = () => {
                    let file = input.files[0]
                    if (!file.type.startsWith('image/')) {
                        this.$toast.fail('请选择正确的图片')
                        return
                    }

                    // 可以利用canvas来对图片进行缩放
                    // 0、使用FileReader对象来读取文件
                    // 1、需要使用Image对象来加载图片base64字节码
                    // 2、使用canvas把Image对象进行缩放绘制
                    // 3、通过canvas获取到base64字节码
                    let fr = new FileReader()
                    fr.onload = () => {
                        let img = new Image()
                        img.onload = () => {
                            let canvas = document.createElement('canvas')
                            canvas.width = 320
                            canvas.height = 320
                            let ctx = canvas.getContext('2d')
                            // drawImage(image: CanvasImageSource, 
                            // sx: number, sy: number, sw: number, sh: number, 
                            // dx: number, dy: number, dw: number, dh: number)
                            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height)
                            // this.$refs.node.appendChild(canvas)
                            // 获取base64
                            let res = canvas.toDataURL()
                            base64UploadApi({
                                type: 'photo',
                                data: res,
                                name: file.name
                            }).then(d => {
                                console.log(d)
                            })
                        }
                        img.src = fr.result
                    }
                    fr.readAsDataURL(file)

                    // if (file.size / 1024 / 1024 > 1) {
                    //     this.$toast.fail('图片太大，重新选择')
                    //     return
                    // }

                    // // FormData对象是可以把数据对象序列化为一个form表单对象
                    // // new 实际上就是创建了一个<form></form>
                    // let fd = new FormData()
                    // // 可以给fd添加数据
                    // // 它相当于在<form>中添加了一个<input name="fileName" type="file">
                    // fd.append('fileName', file)
                    // fileUploadApi(fd).then(d => {
                    //     if (d.code === 200) {
                    //         let path = d.data[0].path
                    //         userUpdateApi({id: this.userInfo.id, photo: path}).then(d => {
                    //             if (d.code === 200) {
                    //                 this.$toast.success('更新头像成功')
                    //             }
                    //         })
                    //     }
                    // })
                }
                input.click()
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../style/common.less';
    img {
        display: block;
        width: 98px;
        height: 98px;
        margin: auto;
        border: solid 1px @c3;
        padding: 2px;
        border-radius: 50%;
        overflow: hidden;
    }
</style>